<template>
  <div class="main-container">
    <main-content :title="contentTitle">
       <div slot="search" style="width:100%">
              <!-- 在此处放置搜索内容 -->
             <div :class="[!searchFlag ? 'searchBox' : '']">
                <el-form label-width="60px">
                    <el-row :gutter="20">
                  <el-col :span="8">
                       <el-form-item  :label="$t('采购单号')">
                  <el-input v-model="searchParam.F_PurchaseOrder" size="small" placeholder="请输入采购单号要查询的关键字"   style="width:100%" ></el-input>
                       </el-form-item>
                  </el-col>
                  <el-col :span="8">
                       <el-form-item  :label="$t('单据日期')">
                  <el-input v-model="searchParam.F_PurchaseDate" size="small" placeholder="请输入单据日期要查询的关键字"   style="width:100%" ></el-input>
                       </el-form-item>
                  </el-col>
                  <el-col :span="8">
                       <el-form-item  :label="$t('供货单位')">
                  <el-input v-model="searchParam.F_DeliveryUnit" size="small" placeholder="请输入供货单位要查询的关键字"   style="width:100%" ></el-input>
                       </el-form-item>
                  </el-col>
                 <template v-if="searchFlag">
                  <el-col :span="8">
                       <el-form-item  :label="$t('采购人员')">
                  <el-input v-model="searchParam.F_PurchasePeople" size="small" placeholder="请输入采购人员要查询的关键字"   style="width:100%" ></el-input>
                       </el-form-item>
                  </el-col>
                  <el-col :span="8">
                       <el-form-item  :label="$t('采购类型')">
                  <el-input v-model="searchParam.F_PurchaseType" size="small" placeholder="请输入采购类型要查询的关键字"   style="width:100%" ></el-input>
                       </el-form-item>
                  </el-col>
                 </template>
                  </el-row>
                </el-form>
        </div>
                  <div style="float:right; margin-top:6px; ">
                     <el-button type="primary" icon="el-icon-search" size="small" @click="searchClick">{{$t("tagsView.search")}}</el-button>
                     <el-button icon="el-icon-refresh" size="small" @click="searchReset">{{$t("reset")}}</el-button>
                     <el-link :underline="false"  @click="() => searchFlag = !searchFlag"  style="margin-left:10px"  >{{ searchFlag ? "收起" : $t("menuManagement.addModal.checkboxOpen")  }}<i :class="[!searchFlag ? 'el-icon-arrow-down' : 'el-icon-arrow-up']"></i></el-link>
                  </div>
        </div>
      <div slot="table">
        <!-- 在此处放置表格内容 -->
        <avue-crud
          ref="ERP_PurchaseOrderInfo3Table"
          :data="listData"
          @selection-change="selectionChange"
          id="printTable"
          :option="option"
          stripe
          :page.sync="page"
          @on-load="onPageLoad"
          @sort-change="sortChange"
          @row-dblclick="editForm"
        >
          <template slot-scope="scope" slot="menu">
            <template v-if="scope.row.flowStatus && scope.row.flowStatus == 2">
              <span
                v-if="
                  hasBtns('createFormFlow') &&
                  hasButtonPermission('createFormFlow')
                "
                class="form-span-button"
                >审批中</span
              >
              <el-button
                type="opr-primary"
                size="mini"
                icon="el-icon-view"
                v-if="hasBtns('view') && hasButtonPermission('view')"
                @click="viewForm(scope.row)"
                >查看</el-button
              >
            </template>
            <template
              v-else-if="scope.row.flowStatus && scope.row.flowStatus == 3"
            >
              <span
                v-if="
                  hasBtns('createFormFlow') &&
                  hasButtonPermission('createFormFlow')
                "
                class="form-span-button"
                >审批完成</span
              >
              <el-button
                type="opr-primary"
                size="mini"
                icon="el-icon-view"
                v-if="hasBtns('view') && hasButtonPermission('view')"
                @click="viewForm(scope.row)"
                >查看</el-button
              >
              <el-button
                type="opr-primary"
                size="mini"
                icon="el-icon-edit"
                v-if="hasBtns('modify') && hasButtonPermission('modify')"
                @click="editForm(scope.row)"
                >编辑</el-button
              >
              <el-button
                type="opr-primary"
                size="mini"
                icon="el-icon-delete"
                v-if="hasBtns('delete') && hasButtonPermission('delete')"
                @click="deleteForm(scope.row)"
                >删除</el-button
              >
            </template>
            <template v-else>
              <el-button
                type="opr-primary"
                size="mini"
                icon="el-icon-guide"
                v-if="
                  scope.row.flowStatus &&
                  scope.row.flowStatus == 1 &&
                  hasBtns('createFormFlow') &&
                  hasButtonPermission('createFormFlow')
                "
                @click="CreateFormFlow(scope.row)"
                >发起审批</el-button
              >
              <el-button
                type="opr-primary"
                size="mini"
                icon="el-icon-guide"
                v-if="
                  hasBtns('createDesignFlow') &&
                  hasButtonPermission('createDesignFlow')
                "
                @click="CreateDesignFlow(scope.row)"
                >发起临时流程</el-button
              >
              <el-button
                type="opr-primary"
                size="mini"
                icon="el-icon-view"
                v-if="hasBtns('view') && hasButtonPermission('view')"
                @click="viewForm(scope.row)"
                >查看</el-button
              >
              <el-button
                type="opr-primary"
                size="mini"
                icon="el-icon-edit"
                v-if="hasBtns('modify') && hasButtonPermission('modify')"
                @click="editForm(scope.row)"
                >编辑</el-button
              >
              <el-button
                type="opr-primary"
                size="mini"
                icon="el-icon-delete"
                v-if="hasBtns('delete') && hasButtonPermission('delete')"
                @click="deleteForm(scope.row)"
                >删除</el-button
              >
            </template>
          </template>
          <template slot-scope="scope" slot="menuLeft">
            <el-button
              type="primary"
              v-if="hasButtonPermission('refresh')"
              icon="el-icon-refresh-right"
              size="small"
              >刷新</el-button
            >
            <el-button
              type="primary"
              v-if="hasButtonPermission('add')"
              icon="el-icon-plus"
              size="small"
              @click="openForm()"
              >新增</el-button
            >
            <el-button
              type="primary"
              v-if="hasButtonPermission('batchDelete')"
              icon="el-icon-delete"
              size="small"
              @click="batchDelete()"
              >批量删除</el-button
            >
            <el-button
              type="primary"
              v-if="hasButtonPermission('print')"
              icon="el-icon-printer"
              size="small"
              @click="&quot;#printForm&quot;;"
              >打印</el-button
            >
            <el-button
              type="primary"
              v-if="hasButtonPermission('import')"
              icon="fa fa-sign-in"
              size="small"
              @click="excelDialog = true"
              >快速导入</el-button
            >
            <el-button
              type="primary"
              v-if="hasButtonPermission('export')"
              icon="fa fa-sign-out"
              size="small"
              @click="tableExport()"
              >快速导出</el-button
            >
          </template>
        </avue-crud>
        <el-dialog
          title="表单"
          :append-to-body="true"
          :fullscreen="true"
          :visible.sync="flag"
          :class="isWorkflowForm ? 'work-form-dialog' : ''"
          :show-close="!isWorkflowForm"
        >
          <ERP_PurchaseOrderInfo3Form
            ref="xtForm"
            v-if="flag"
            :isEdit="isEdit"
            :disabled="disabled"
            @onChange="dialogChange"
            :keyValue="keyValue"
          ></ERP_PurchaseOrderInfo3Form>
        </el-dialog>
        <el-dialog
          title="快速导入"
          width="30%"
          :append-to-body="true"
          :visible.sync="excelDialog"
        >
          <el-upload
            class="upload-demo"
            ref="upload"
            :data="uploadData"
            :before-upload="beforeUpload"
            :on-success="successUpload"
            :show-file-list="true"
            drag
            :headers="headers"
            accept=".csv,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
            :action="baseUrl + '/erp_purchaseorderinfo3/import'"
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将文件拖到此处，或<em>点击上传</em>
            </div>
            <div class="el-upload__tip" slot="tip">
              只能上传Excel文件，且不超过1G
            </div>
          </el-upload>
          <el-row type="flex">
            <el-col> </el-col>
            <el-col style="text-align: right">
              <p></p>
              <el-button icon="el-icon-download" @click="download">
                下载模板</el-button
              >
            </el-col>
          </el-row>
        </el-dialog>
      </div>
    </main-content>
    <createFlow
      v-if="isCreateFlow"
      formType="2"
      :UrlAddress="this.$options.name"
      :createFlowType="createFlowType"
      :row="scopeRow"
      :scheme="scheme"
      @closedCreateFlow="closedCreateFlow"
    ></createFlow>
  </div>
</template>
<script>
import createFlow from "@/components/formInitiationProcess/createFlow";
import schemeMixins from "@/components/formInitiationProcess/schemeMixins";
import MainFixed from "@/page/main/MainFixed";
import authorizeMixin from "@/mixins/authorize";
import tableOptionMixin from "@/mixins/tableOption"; //table 高度计算
import MainContent from "@/page/main/MainContent";
import request from "@/router/axios";
import { baseUrl } from "@/config/env";
import { getOrder } from "@/util/util";
import ERP_PurchaseOrderInfo3Form from "./ERP_PurchaseOrderInfo3Form";
export default {
  name: "ERP_PurchaseOrderInfo3",
  mixins: [authorizeMixin, tableOptionMixin, schemeMixins],
  components: {
    MainContent,
    MainFixed,
    ERP_PurchaseOrderInfo3Form,
    createFlow,
  },
  data() {
    return {
      computedHeight: 50,
      btns: [
        "refresh",
        "add",
        "modify",
        "delete",
        "batchDelete",
        "print",
        "import",
        "export",
        "createDesignFlow",
        "createFormFlow",
        "delete",
      ],
      contentTitle: "采购订单列表",
      page: {
        pageSize: 10,
        total: 0,
        currentPage: 1,
      },
      ids: "",
      F_PurchaseDate_Date: [],
      F_DeliveryDate_Date: [],
      listData: [],
      keyValue: "",
      flag: false,
      isEdit: true, // 查看-不显示按钮,
      disabled: false, // 查看-禁用input,
      isWorkflowForm: false, //默认值 false
      searchParam: {
        F_PurchaseOrder: "",
        F_PurchaseDate_Start: "",
        F_PurchaseDate_End: "",
        F_PurchaseDate_Date: "",
        F_DeliveryUnit: "",
        F_PurchasePeople: "",
        F_PurchaseType: "",
        F_DeliveryDate_Start: "",
        F_DeliveryDate_End: "",
        F_DeliveryDate_Date: "",
      },
      searchFlag: false,
      defaultProps: {
        children: "children",
        label: "",
      },
      uploadData: { F_ModuleId: "" },
      headers: {},
      excelDialog: false,
      F_DeliveryUnit_Option: [],
      F_PurchaseType_Option: [],
      option: {
        rowKey: "F_Id",
        highlightCurrentRow: true,
        stripe: true,
        addBtn: false,
        menuWidth: 320,
        border: true,
        page: true,
        selection: true,
        index: true,
        indexLabel: "序号",
        align: "center",
        menuAlign: "left",
        delBtn: false,
        editBtn: false,
        column: [
          {
            sortable: true,
            label: "采购单号",
            prop: "F_PurchaseOrder",
          },
          {
            sortable: true,
            label: " 采购申请单号",
            prop: "F_SourceNumber",
          },
          {
            sortable: true,
            label: "单据日期",
            prop: "F_PurchaseDate",
          },
          {
            sortable: true,
            label: "采购人员",
            prop: "F_PurchasePeople",
          },
          {
            sortable: true,
            label: "供货单位",
            prop: "F_DeliveryUnit",
          },
          {
            sortable: true,
            label: "采购类型",
            prop: "F_PurchaseType",
          },
          {
            sortable: true,
            label: "到货日期",
            prop: "F_DeliveryDate",
          },
          {
            sortable: true,
            label: "采购总额",
            prop: "F_TotalPurchases",
          },
          {
            sortable: true,
            label: " 付款期限",
            prop: "F_PaymentDate",
          },
          {
            sortable: true,
            label: "付款方式",
            prop: "F_PaymentMethod",
          },
          {
            sortable: true,
            label: "备注",
            prop: "F_Description",
          },
          {
            sortable: true,
            label: "状态",
            prop: "F_Status",
          },
          {
            sortable: true,
            label: "作废状态",
            prop: "F_InvalidMark",
          },
          {
            sortable: true,
            label: "制单人员",
            prop: "F_CreatorUserId",
          },
          {
            sortable: true,
            label: "制单时间",
            prop: "F_CreatorTime",
          },
        ],
      },
    };
  },
  created() {
    this.getF_DeliveryUnit_Option();
    this.getF_PurchaseType_Option();
    const token = JSON.parse(localStorage.getItem("avue-token"))["content"];
    this.headers.Authorization = "Bearer " + token;
    this.uploadData = { F_ModuleId: this.$route.meta.moduleid };
  },
  methods: {
    printForm() {
      let element = window.document.getElementById("printTable");
      setTimeout(() => {
        html2canvas(element, {
          backgroundColor: null,
          useCORS: true,
          windowHeight: document.body.scrollHeight,
        }).then((canvas) => {
          const url = canvas.toDataURL();
          this.printImg = url;
          printJS({
            printable: url,
            type: "image",
            documentTitle: "打印",
            scanStyles: false,
            repeatTableHeader: false,
            header: null,
          });
        });
      }, 1);
    },
    hasBtns(encode) {
      return this.btns.includes(encode);
    },
    /**发起流程 */
    CreateDesignFlow(val) {
      this.createFlowType = 0;
      this.scopeRow = val;
      this.changeSystemSchemeInfo();
    },
    CreateFormFlow(val) {
      this.createFlowType = 1;
      this.scopeRow = val;
      this.isCreateFlow = true;
    },
    getF_DeliveryUnit_Option() {
      request({
        url: baseUrl + "/database-links/localDB/datas",
        method: "get",
        params: {
          sql: `	select i.F_Id,F_FullName from erp_inoutunit i where i.F_UniType=1`,
        },
      }).then((res) => {
        this.F_DeliveryUnit_Option = res.data.data;
      });
    },
    getF_PurchaseType_Option() {
      request({
        url: baseUrl + "/data-items/Purchase-category/detail",
        method: "get",
      }).then((res) => {
        this.F_PurchaseType_Option = res.data.data;
      });
    },
    download() {
      request({
        url: baseUrl + "/excel-import/download/" + this.$route.meta.moduleid,
        method: "get",
        responseType: "blob",
      }).then((res) => {
        let url = window.URL.createObjectURL(
          new Blob([res.data], {
            type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
          })
        );
        let link = document.createElement("a");
        link.style.display = "none";
        link.href = url;
        link.setAttribute("download", "ERP_PurchaseOrderInfo3.xlsx");
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      });
    },
    upload() {
      this.$refs["upload"].submit();
    },
    successUpload(res) {
      if (res.code === 0) {
        this.$message.success("导入完成！");
        this.getListData();
      } else this.$message.error(res.msg);
    },
    /* 获取公司用户数据 */
    getListData() {
      request({
        url: baseUrl + "/erp_purchaseorderinfo3",
        method: "get",
        params: this.searchParam,
      }).then((res) => {
        this.listData = res.data.data.Rows;
        this.page.total = res.data.data.Total;
      });
    },
    /* 页面加载 */
    onPageLoad(page) {
      this.searchParam.limit = page.currentPage;
      this.searchParam.size = page.pageSize;
      this.getListData();
    },
    /* 查询 */
    searchClick() {
      this.searchParam.limit = 1;
      this.searchParam.order = null;
      this.searchParam.orderfield = null;
      this.getListData();
    },
    /* 查询表单重置 */
    searchReset() {
      this.searchParam.F_PurchaseOrder = null;
      this.searchParam.F_PurchaseDate_Start = null;
      this.searchParam.F_PurchaseDate_End = null;
      this.searchParam.F_PurchaseDate_Date = null;
      this.F_PurchaseDate_Date = [];
      this.searchParam.F_DeliveryUnit = null;
      this.searchParam.F_PurchasePeople = null;
      this.searchParam.F_PurchaseType = null;
      this.searchParam.F_DeliveryDate_Start = null;
      this.searchParam.F_DeliveryDate_End = null;
      this.searchParam.F_DeliveryDate_Date = null;
      this.F_DeliveryDate_Date = [];
      this.getListData();
    },
    /*查看*/
    viewForm(val) {
      this.flag = true;
      this.isEdit = false;
      this.disabled = true;
      this.keyValue = val.F_Id;
    },
    /* 编辑 */
    editForm(val) {
      this.flag = true;
      this.isEdit = true;
      this.disabled = false;
      this.keyValue = val.F_Id;
    },
    /* 打开表单 */
    openForm() {
      if (!this.isWorkflowForm) {
        //不处理工作流表单时候，表单类型重置
        window.localStorage.setItem("systemFormType", 0);
      }
      this.keyValue = null;
      this.flag = true;
      this.isEdit = true;
    },
    /* 删除 */
    deleteForm(val) {
      this.$confirm("确定要删除此项吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        request({
          url: baseUrl + "/erp_purchaseorderinfo3/" + val.F_Id,
          method: "delete",
        }).then((res) => {
          this.getListData();
          this.$notify({
            title: "成功",
            message: "删除成功",
            type: "success",
          });
        });
      });
    },
    /* 分页 */
    sortChange(data) {
      this.searchParam.order = getOrder(data.order);
      this.searchParam.orderfield = data.prop;
      this.getListData();
    },
    /* 弹窗回调 */
    dialogChange(b) {
      this.flag = false;
      this.$nextTick(() => {
        this.getListData();
      });
    },
    /* 导出 */
    tableExport() {
      this.$refs["ERP_PurchaseOrderInfo3Table"].rowExcel();
      return;
    },
    selectionChange(list) {
      this.ids = list.map((x) => x.F_Id).join(",");
    },
    batchDelete() {
      if (!this.ids || this.ids.split(",").length === 0) {
        this.$message.error("未选择项目！");
        return;
      }
      this.$confirm("确定要批量删除所选项吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        request({
          url: baseUrl + "/erp_purchaseorderinfo3/" + this.ids,
          method: "delete",
        }).then((res) => {
          this.getListData();
          this.$notify({
            title: "成功",
            message: "删除成功",
            type: "success",
          });
        });
      });
    },
    F_PurchaseDate_DateChange(val) {
      this.searchParam.F_PurchaseDate_Start = val[0];
      this.searchParam.F_PurchaseDate_End = val[1];
    },
    F_DeliveryDate_DateChange(val) {
      this.searchParam.F_DeliveryDate_Start = val[0];
      this.searchParam.F_DeliveryDate_End = val[1];
    },
  },
};
</script>
<style scoped>
.el-upload {
  width: 100%;
}
.el-upload-dragger {
  width: 100%;
}
.searchBox {
  width: calc(100% - 218px);
  display: inline-block;
}
</style>
